Skip to content

feat(atomic): migrate atomic-facet-number-input to Lit#6744

Merged
jmazzah-coveo merged 23 commits intomainfrom
copilot/migrate-atomic-facet-number-input
Dec 18, 2025
Merged

feat(atomic): migrate atomic-facet-number-input to Lit#6744
jmazzah-coveo merged 23 commits intomainfrom
copilot/migrate-atomic-facet-number-input

Conversation

Copy link
Contributor

Copilot AI commented Dec 9, 2025 •
edited
Loading

Migrates the internal atomic-facet-number-input component from Stencil to Lit while maintaining backward compatibility for Stencil parent components.

Changes

Component Migration

  • Created atomic-facet-number-input.ts with Lit implementation
  • Renamed original to stencil-facet-number-input.tsx for continued use by Stencil parents
  • Implements InitializableComponent pattern with @bindings() decorator
  • Converts PostCSS to inline Lit css tag
  • Uses @/* path aliases throughout

Testing

  • Added 17 unit tests covering props, rendering, form submission, validation, and refs
  • Added E2E tests for form interactions, breadcrumb integration, and input validation
  • Generated visual regression baseline from Stencil component
  • Migrated validation tests from Cypress to Playwright

Backward Compatibility
Both versions coexist until parent components (atomic-numeric-facet, atomic-insight-numeric-facet) are migrated from Stencil. Parents continue using stencil-facet-number-input.tsx with no breaking changes.

// New Lit version ready for Lit parents
@customElement('atomic-facet-number-input')
@bindings()
export class AtomicFacetNumberInput
  extends LightDomMixin(LitElement)
  implements InitializableComponent<AnyBindings>
{
  @property({type: String}) public type!: NumberInputType;
  @property({type: Object}) public filter!: NumericFilter;
  
  initialize() {
    this.start = this.filterState.range?.start;
    this.end = this.filterState.range?.end;
  }
  // ...
}
Original prompt

This section details on the original issue you should resolve

<issue_title>Migrate atomic-facet-number-input</issue_title>
<issue_description>

Jira Issue: KIT-4951

Type: User Story
Status: New
Priority: Medium
Components: Atomic

Comments on the Issue (you are @copilot in this section)

Custom agent used: StencilToLitMigrationV2
Specialized agent for migrating Atomic Stencil code to Lit with visual regression testing

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Copilot AI and others added 5 commits December 9, 2025 15:50
@jmazzah-coveo
test: add visual regression baseline for atomic-facet-number-input (S…
082945d 
…tep 0)

- Add visual regression tests to numeric facet E2E
- Create page object helpers for screenshots
- Add WithInputInteger story for testing
- Generate baseline snapshot from Stencil component
- Snapshot will be used to validate Lit migration

Co-authored-by: jmazzah-coveo <229375403+jmazzah-coveo@users.noreply.github.com>
@jmazzah-coveo
feat(atomic): migrate atomic-facet-number-input to Lit (Step 1)
121a394 
- Create new atomic-facet-number-input.ts (Lit version)
- Rename original to stencil-facet-number-input.tsx
- Use @/* path aliases for all imports
- Implement InitializableComponent pattern
- Add CSS styles inline with css tag
- Add event handling for form submission
- Preserve all Stencil functionality in Lit

Co-authored-by: jmazzah-coveo <229375403+jmazzah-coveo@users.noreply.github.com>
@jmazzah-coveo
test(atomic): add unit tests for atomic-facet-number-input (Step 2)
c9c545f 
- Create comprehensive Vitest unit tests
- Test props, rendering, form submission, validation
- Test integer vs decimal step behavior
- Test refs and event handling
- Follow commerce variant test patterns
- All 17 tests passing

Co-authored-by: jmazzah-coveo <229375403+jmazzah-coveo@users.noreply.github.com>
@jmazzah-coveo
test(atomic): add E2E tests for number input functionality (Step 4)
e4fc3af 
- Add functional E2E tests for number input
- Test rendering, filling values, applying range
- Test breadcrumb integration
- Test clear filter functionality
- Use proper test synchronization with await expect()
- Document page object usage (parent is Stencil)

Co-authored-by: jmazzah-coveo <229375403+jmazzah-coveo@users.noreply.github.com>
@jmazzah-coveo
test(atomic): add validation tests and analyze Cypress (Step 6)
5972cec 
- Add input validation tests to Playwright E2E
- Test empty inputs, missing inputs, and invalid ranges
- Categorize Cypress tests:
  * Display/interaction tests: Duplicate (covered in Playwright)
  * Validation tests: Migrated to Playwright
  * Analytics/URL tests: Out of scope (parent responsibility)
- Cypress tests can remain for now (parent still Stencil)

Co-authored-by: jmazzah-coveo <229375403+jmazzah-coveo@users.noreply.github.com>
Copilot AI changed the title [WIP] Migrate atomic-facet-number-input component feat(atomic): migrate atomic-facet-number-input to Lit Dec 9, 2025
Copilot AI requested a review from jmazzah-coveo December 9, 2025 16:02
Copilot AI reviewed Dec 16, 2025
View reviewed changes
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR migrates the internal atomic-facet-number-input component from Stencil to Lit, converting it to a standalone Lit component while removing the legacy Stencil implementation. The component is used by both search and insight numeric facets to provide number input functionality.

Key Changes:

  • Migrates component implementation from Stencil to Lit with light DOM rendering
  • Converts PostCSS styles to inline Lit css tags
  • Adds comprehensive unit tests (17 tests) and E2E validation tests
  • Registers component in lazy loading system and exports

Reviewed changes

Copilot reviewed 8 out of 9 changed files in this pull request and generated 8 comments.

Show a summary per file
File Description
packages/atomic/src/components/common/atomic-facet-number-input/atomic-facet-number-input.ts New Lit implementation with decorators, light DOM mixin, and inline styles
packages/atomic/src/components/common/atomic-facet-number-input/atomic-facet-number-input.spec.ts New unit tests covering props, rendering, form submission, and validation
packages/atomic/src/components/common/facets/facet-number-input/facet-number-input.tsx Removed original Stencil implementation
packages/atomic/src/components/common/facets/facet-number-input/atomic-facet-number-input.pcss Removed PostCSS styles (converted to inline CSS)
packages/atomic/src/components/search/facets/atomic-numeric-facet/e2e/atomic-numeric-facet.e2e.ts Added validation tests for empty inputs and min/max validation
packages/atomic/src/components/search/facets/atomic-numeric-facet/atomic-numeric-facet.new.stories.tsx Added story for integer input testing
packages/atomic/src/utils/custom-element-tags.ts Registered component tag in custom elements set
packages/atomic/src/components/common/lazy-index.ts Added lazy loading entry for the component
packages/atomic/src/components/common/index.ts Added export for the new component
packages/atomic/src/components.d.ts Removed Stencil type definitions (auto-generated)

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

alexprudhomme
alexprudhomme approved these changes Dec 17, 2025
View reviewed changes
Copy link
Contributor

@alexprudhomme alexprudhomme left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm

@jmazzah-coveo jmazzah-coveo added this pull request to the merge queue Dec 18, 2025
Merged via the queue into main with commit 7f7d2c0 Dec 18, 2025
182 of 185 checks passed
@jmazzah-coveo jmazzah-coveo deleted the copilot/migrate-atomic-facet-number-input branch December 18, 2025 19:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@alexprudhomme alexprudhomme alexprudhomme approved these changes

@jmazzah-coveo jmazzah-coveo Awaiting requested review from jmazzah-coveo

@lavoiesl lavoiesl Awaiting requested review from lavoiesl lavoiesl was automatically assigned from coveo/dxui

@louis-bompart louis-bompart Awaiting requested review from louis-bompart louis-bompart was automatically assigned from coveo/dxui

Assignees

Copilot code review Copilot

@jmazzah-coveo jmazzah-coveo

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Migrate atomic-facet-number-input

3 participants

@alexprudhomme @jmazzah-coveo